<template>
  <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="简短意向" v-bind="validateInfos.short_intention" help="不超过10个字">
      <a-input v-model:value="formState.short_intention" /><span></span>
    </a-form-item>
    <a-form-item label="意向" v-bind="validateInfos.intention" help="可加多个意向">
      <a-textarea type="textarea" v-model:value="formState.intention" />
    </a-form-item>
    <a-form-item label="意向展示方式" v-bind="validateInfos.intention_status">
      <a-select v-model:value="formState.intention_status">
        <a-select-option v-for="(pub, index) in publishArr" :value="index" :key="index">{{
          pub
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="意向背景介绍">
      <a-textarea type="textarea" v-model:value="formState.description" />
    </a-form-item>
    <a-form-item label="个人微信" v-bind="validateInfos.weixin_id">
      <a-input type="text" v-model:value="formState.weixin_id" placeholder="" />
    </a-form-item>
    <a-form-item label="开始时间" help="选择实际开始时间，如2021年1月1日">
      <a-date-picker v-model:value="formState.start_date" />
    </a-form-item>

    <a-form-item :style="{ textAlign: 'center' }" :wrapper-col="{ span: 24 }">
      <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
      <a-button style="margin-left: 10px" @click="resetFields">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRaw, UnwrapRef } from 'vue';
  import { DatePicker, Form, Input, Select, Switch, Button, Upload } from 'ant-design-vue';
  import { useForm } from '@ant-design-vue/use';
  import { IntentionFormState } from '../types/form.interface';
  import moment from 'moment';
  import { createIntention } from '../api/api';
  import { useGo } from '../hooks/usePages';

  export default defineComponent({
    name: 'create',
    components: {
      [DatePicker.name]: DatePicker,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Input.TextArea.name]: Input.TextArea,
      [Select.name]: Select,
      ASelectOption: Select.Option,
      [Switch.name]: Switch,
      [Button.name]: Button,
      [Upload.name]: Upload,
    },
    setup() {
      const formState: UnwrapRef<IntentionFormState> = reactive({
        short_intention: '',
        weixin_id: '',
        intention: '',
        description: '',
        intention_status: 0,
        group_qrc: '',
        start_date: moment(),
      });
      const rules = reactive({
        short_intention: [
          {
            required: true,
            message: '短意向必须',
          },
        ],
        intention: [
          {
            required: true,
            message: '意向必须',
          },
        ],
      });

      const publishArr = ['公开', '不显示', '局部可见'];

      async function onSubmit() {
        const res = await validate();
        const go = useGo();
        if (res) {
          const ret: any = await createIntention(toRaw(formState));

          if (ret.id) go('/createResult');
        }
      }

      function upload(files: any) {
        return false;
      }

      function beforeUpload(file: File) {
        return false;
      }

      const { resetFields, validate, validateInfos } = useForm(formState, rules);

      return {
        formState,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
          md: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 },
        },
        resetFields,
        validateInfos,
        onSubmit,
        publishArr,
        upload,
        beforeUpload,
      };
    },
  });
</script>

<style scoped lang="less"></style>
